<template>
  <div class="wrap">
    <!-- 标题、油站 -->
    <div class="g-flex-sb">
      <p class="title">{{configData.title}}</p>
      <el-select
        v-if="userInfo.company"
        v-model="gasId"
        filterable
        placeholder="请选择油站"
        @change="changeStation"
        style="width: 250px">
        <el-option v-for="item in options" :key="item.gasId" :value="item.gasId" :label="item.gasName"></el-option>
      </el-select>
      <div v-else>{{ userInfo.gasName }}</div>
    </div>
    <!-- 内容 -->
    <div class="g-flx content">
      <div class="left g-flx-center">
        <img v-if="status !== 'pending'" :src="ossUrl + 'vipPool/tag-animation-static.png'" alt="">
        <img v-else :src="ossUrl + 'vipPool/tag-animation.gif'" alt="">
        <el-button type="primary" @click="start" :disabled="status === 'pending'">{{ btnName }}</el-button>
      </div>
      <div class="g-flx-1 g-flex-c right">
        <img :src="ossUrl+'intelligence/'+configData.imgUrl" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import {ossUrl} from '@/utils/config'
import { getQueryGasList } from '@/api/marketShop'
import { mapGetters } from 'vuex'

export default {
  name: 'intelligence_competitiveAnalysis',
  props: {
    configData: {
      type: Object,
      default () {
        return {
          title: '同城油站竞争力分析',
          imgUrl: 'tips-competitive.png',
          btnName: '检测',
        }
      }
    },
  },
  data () {
    return {
      status: 'start',
      ossUrl:ossUrl,
      options: [],
      gasId: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    btnName () {
      let btnName
      switch (this.status) {
        case 'start':
          btnName = `开始${this.configData.btnName}`
          break
        case 'pending':
          btnName = `${this.configData.btnName}中`
          break
        case 'end':
          btnName = `${this.configData.btnName}完成`
          break
      }
      return btnName
    }
  },
  methods: {
    // 查询油站
    async searchStation () {
      try {
        const { code, result } = await getQueryGasList()
        if (code !== 200 ) return
        this.options = result
      } catch (error) {
        console.log(error)
      }
    },
    // 开始检测
    start () {
      this.status = 'pending'
      this.$emit('changeStatus', false)
      setTimeout(() => {
        this.status = 'end'
        this.$emit('changeStatus', true)
      }, 4000)
    },
    // 切换油站
    changeStation (id) {
      this.status = 'start'
      this.$emit('changeStation', id)
    }
  },
  async created () {
    await this.searchStation()
    if (this.options.length) {
      this.gasId = this.options[0].gasId
      this.$emit('changeStation', this.gasId)
    }
  }
}
</script>
<style lang="less" scoped>
  .wrap {
    margin: 20px 0 60px;
    .title {
      font-size: 20px;
      font-weight: bold;

    }
    .content {
      width: 100%;
      .left {
        width: 300px;
        /deep/.el-button {
          width: 130px;
          background-color: #4B7EFE;
        }
        img {
          width: 100%;
        }
      }
      .right {
        img {
          width: 78%;
        }
      }
    }
  }
</style>